﻿@page "/Grid/MasterDetail/NestedGrid"
@layout DataProviderAccessArea<INwindDataProvider>

<DemoPageSectionComponent Id="Grid-MasterDetail-NestedGrid" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        @inject NwindDataService NwindDataService

        <div class="grid-container">     
            <DxGrid @ref="Grid" Data="MasterGridData" AutoCollapseDetailRow="AutoCollapseDetailRow" SizeMode="Params.SizeMode"
                ColumnResizeMode="GridColumnResizeMode.NextColumn" TextWrapEnabled="false" PageSize="15">
                <Columns>
                    <DxGridDataColumn FieldName="ContactName" SortIndex="0" />
                    <DxGridDataColumn FieldName="CompanyName" />
                    <DxGridDataColumn FieldName="Country" />
                    <DxGridDataColumn FieldName="City" />
                </Columns>
                <DetailRowTemplate>
                    <Grid_MasterDetail_NestedGrid_DetailContent Customer="(Customer)context.DataItem" />
                </DetailRowTemplate>
                <ToolbarTemplate>
                    <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
                        <Items>
                            <DxToolbarItem BeginGroup="true" Alignment="ToolbarItemAlignment.Left">
                                <Template Context="toolbar_item_context">
                                    <div class="d-flex flex-row align-items-center">
                                        <DxCheckBox @bind-Checked="AutoCollapseDetailRow">
                                            Auto Collapse Detail Rows
                                        </DxCheckBox>
                                    </div>
                                </Template>
                            </DxToolbarItem>
                        </Items>
                    </DxToolbar>
                </ToolbarTemplate>
            </DxGrid>
        </div>
    </ChildContentWithParameters>

    @code {
        IGrid Grid { get; set; }
        object MasterGridData { get; set; }

        bool AutoCollapseDetailRow { get; set; }

        protected override async Task OnInitializedAsync() {
            MasterGridData = await NwindDataService.GetCustomersAsync();
        }

        void AutoCollapseDetailRow_Changed(bool newValue) {
            AutoCollapseDetailRow = newValue;
            if(newValue) {
                Grid.BeginUpdate();
                Grid.CollapseAllDetailRows();
                Grid.ExpandDetailRow(0);
                Grid.EndUpdate();
            }
        }
    }
</DemoPageSectionComponent>
